<template>
  <div class="flex gap-4 mb-4">
    <span><b>球星卡搜索： </b></span>
    <el-input
      v-model="input2"
      style="width: 240px"
      placeholder="输入球星卡"
      :prefix-icon="Search"
      @input="$emit('output',input2)"
    /> 
    <div class="spacer"></div>
    
  </div>



<el-button type="primary"  @click="dialogFormVisible = true">
  添加球星卡
</el-button>
 <el-dialog v-model="dialogFormVisible" title="添加球星卡" width="500">
  <el-form :model="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="球员姓名">
          <el-input v-model="form.playerName" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="球员账户">
          <el-input v-model="form.playerAccount" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="球员分数">
          <el-input v-model="form.playerScores" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="球员位置1">
        <el-select-v2
    v-model="form.role1" @input = "checkForm"
    :options="options"
    placeholder=" "
    style="width: 120px"
    multiple
  />
</el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="球员位置2">
        <el-select-v2
    v-model="form.role2" @input = "checkForm"
    :options="options"
    placeholder=" "
    style="width: 120px"
    multiple
  />
</el-form-item>
</el-col>
      <el-col :span="12">
        <el-form-item label="个性签名">
          <el-input v-model="form.description" autocomplete="off" />
        </el-form-item>
      </el-col>
  
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="球衣号">
          <el-input v-model="form.number" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="球队">
          <el-input v-model="form.team" autocomplete="off" />
        </el-form-item>
      </el-col>
  
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-form-item>
          <el-button  @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">添加</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>


</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
const value = ref('')
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const deleteSelected = ref(false)
import { reactive} from 'vue'
const flag = ref(true);
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const initials = ['GK', 'WB', 'CB', 'CDM','CAM', 'CM', 'WF','ST']
const options = ref(
  Array.from({ length: 8 }).map((_, idx) => ({
    role1: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}`,
  }))
)

const form = reactive({
  playerName: '',
  playerAccount: '',
  playerScores: '',
  role1: '',
  role2: '',
  description: '',
  number: '',
  team: '',

})
function checkForm(){
  if(form.playerName && form.playerAccount && form.playerScores && form.role1 && form.number){
      flag.value = false;
  }else{
    flag.value = true;
  }
}

import {  } from 'vue'


const value1 = ref('')
const value2 = ref('')
const textarea = ref('')
const shortcuts = [
{
  text: 'Today',
  value: new Date(),
},
{
  text: 'Yesterday',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24)
    return date
  },
},
{
  text: 'A week ago',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
    return date
  },
},
]

  function submitForm(){
    const userData = {
      playerName: form.playerName,
      playerAccount: form.playerAccount,
      playerScores: form.playerScores,
      role1: form.role1,
      role2: form.role2,
      description : form.description,
      number: form.number,
      team: form.team
            }
            console.log(userData.data);
            axios.post('http://localhost:9001/PlayerCard/addPlayerCard',userData).then(response =>{
                if(response.data){
                    alert("添加成功")
                    this.$router.push('/')
                }else{
                    alert("添加失败，账号已存在")
                }})
                dialogFormVisible.value = false;
  }


</script>


<style scoped>
.spacer {
  margin: 16px 0; /* 控制空行的高度，16px 可以根据需要调整 */
}

.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}

.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}

.demo-date-picker .block:last-child {
border-right: none;
}

.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
